import { Layout, Button, Menu } from 'antd';
const { SubMenu } = Menu;
import { FormOutlined, CopyOutlined, UserOutlined, MessageOutlined, FolderOpenOutlined, SearchOutlined, StarOutlined, ProjectOutlined, MailOutlined, AppstoreOutlined, GithubOutlined, CalendarOutlined, ClusterOutlined } from '@ant-design/icons';
import { NavLink } from 'umi';
import styles from './layouts.less';
import "./active.less"
let { Header, Footer, Sider, Content } = Layout;
const LayoutPage: React.FC = (props) => {
    return <div className={styles.wrap}>
        <Layout className={styles.container}>
            <Sider>
                <div className={styles.sider}>
                    <div>
                        <img src='https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png' />
                        <span>管理后台</span>
                    </div>
                    <div><Button type="primary">+新建</Button></div>
                    <div>
                        <div className={styles.d1}><NavLink to='/workbench'><ClusterOutlined />工作台</NavLink></div>
                        <div>
                        <Menu theme="dark" mode="inline" className={styles.menu}>
                                <SubMenu key="" icon={<FormOutlined />} title="文章管理">
                                    <Menu.Item key="a1"><NavLink to='' activeStyle={{
                                        color: 'white',
                                    }}>所有文章 </NavLink></Menu.Item>
                                    <Menu.Item key="a2">  <NavLink to='/classify' activeStyle={{
                                        color: 'white',
                                    }}>分类管理 </NavLink></Menu.Item>
                                    <Menu.Item key="a3">  <NavLink to='/tags' activeStyle={{
                                        color: 'white',
                                    }}>标签管理</NavLink></Menu.Item>
                                </SubMenu>
                            </Menu>

                        </div>
                        <div className={styles.d1}><NavLink to='' activeStyle={{
                            color: '#4299e1',
                        }}><CopyOutlined />页面管理</NavLink></div>
                        <div className={styles.d1}><NavLink to='' activeStyle={{
                            color: '#4299e1',
                        }}><CalendarOutlined />知识小册</NavLink></div>
                        <div className={styles.d1}><NavLink to='/poster' activeStyle={{
                            color: '#4299e1',
                        }}><StarOutlined />海报管理</NavLink></div>
                        <div className={styles.d1}><NavLink to='/comment' activeStyle={{
                            color: '#4299e1',
                        }}><MessageOutlined />评论管理</NavLink></div>
                        <div className={styles.d1}><NavLink to='/Mail' activeStyle={{
                            color: '#4299e1',
                        }}><MailOutlined />邮件管理</NavLink></div>
                        <div className={styles.d1}><NavLink to='/file' activeStyle={{
                            color: '#4299e1',
                        }}><FolderOpenOutlined />文件管理</NavLink></div>
                        <div className={styles.d1}><NavLink to='/Search' activeStyle={{
                            color: '#4299e1',
                        }}><SearchOutlined />搜索记录</NavLink></div>
                        <div className={styles.d1}><NavLink to='Access' activeStyle={{
                            color: '#4299e1',
                        }}><ProjectOutlined />访问统计</NavLink></div>
                        <div className={styles.d1}><NavLink to='' activeStyle={{
                            color: '#4299e1',
                        }}><UserOutlined />用户管理</NavLink></div>
                        <div className={styles.d1}><NavLink to='' activeStyle={{
                            color: '#4299e1',
                        }}><AppstoreOutlined />系统管理</NavLink></div>
                    </div>
                </div>
            </Sider>
            <Layout className={styles.right}>
                <Header className={styles.header}>
                    <p>
                        <GithubOutlined />
                        <UserOutlined />
                        {localStorage.getItem('username')}
                    </p>
                </Header>
                <div className={styles.box}>
                    <Content className={styles.content}>{props.children}</Content>
                    <Footer className={styles.footer}>
                        <span><GithubOutlined /></span>
                        <span>CopyRight&nbsp;&copy;2021&nbsp;Designed by Fantasticit.</span>
                    </Footer>
                </div>
            </Layout>
        </Layout>
    </div>
}

export default LayoutPage